<template>
  <continer :showPage="showPage" :isNoTabs="true">
    <template slot="search">
      <QuickSearch
        :advForm="quickSearchForm"
        @QuickSearch="handleSearchFun"
      ></QuickSearch>
    </template>
    <template slot="oprate">
      <el-button type="primary" size="mini" @click="handleSearchFun"
        >查询</el-button
      >
      <el-button
        size="mini"
        @click="addBtnFun"
        v-functions="['post_sale_service_group_insert']"
        >新增</el-button
      >
    </template>
    <template slot="content">
      <instiutionTable
        ref="tableRef"
        @currentChange="currentChangeFun"
        @sizeChange="sizeChange"
        :pages="tablePages"
        :instiutionTableData="tableData"
        :instiutionTableHeader="tableHeader"
      >
      </instiutionTable>
    </template>
    <template slot="page">
      <addServiceGroup
        ref="serviceGroupList"
        :titleArr="titleArr"
        @pageBack="returnPage"
        @createSuc="createSuc"
      />
    </template>
  </continer>
</template>

<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator'
import QuickSearch from '@/common/views/advancedSearch/QuickSearch.vue'
import continer from '@/common/views/configCommon/ui-modules/handle-wrapper.vue'
import instiutionTable from '@/common/views/institutionTable/institutionTable.vue'
import addServiceGroup from '@/afterSales/views/config/serviceGroup/list/addServiceGroup.vue'
import { commonAction, deepClone } from '@/utils/common'
import { CommonModule } from '@/store/modules/common'
import { checkPermission } from '@/utils/directive'
@Component({
  name: 'ServiceItemCategory',
  components: {
    QuickSearch,
    continer,
    instiutionTable,
    addServiceGroup
  }
})
export default class Category extends Vue {
  @Ref() private readonly serviceGroupList!: addServiceGroup
  @Ref() private readonly tableRef !: instiutionTable
  private $confirm: any
  private $message: any

  private showPage: boolean = false

  private titleArr: any[] = []

  private tableData = [] // 表格数据

  private tableHeader: any[] = [ // 表头
    { label: '服务组名称', prop: 'name' },
    { label: '说明', prop: 'description' },
    { label: '负责人', prop: 'directorPer' },
    { label: '创建时间', prop: 'createTime', width: 150 },
    { label: '更新时间', prop: 'updateTime', width: 150 },
    { label: '更新人', prop: 'updateUser' }
  ]

  private tablePages = { // 表格分页
    current: 1,
    pageSize: 10,
    total: 100
  }

  private quickSearchForm: any = { // 快捷检索数据
    form: {
      name: ''
    },
    advSearchOptions: [
      { label: '服务组名称', inputType: 'input', placeholder: '请输入', name: 'name', clearable: true }
    ]
  }

  private currentChangeFun (page: number) { // 翻页
    this.tablePages.current = page
    this.getTableList()
  }

  private sizeChange (size: number) {
    this.tablePages.pageSize = size
    this.getTableList()
  }

  private handleSearchFun () { // 搜素
    this.tablePages.current = 1
    this.getTableList()
  }

  private getName (id: any) {
    const agent = CommonModule.publicCache.userListObj[id]
    if (agent) {
      return agent && agent.name
    }
    return ''
  }

  private getTableList () { // 获取表格数据
    const sendData = {
      limit: this.tablePages.pageSize,
      page: this.tablePages.current,
      name: this.quickSearchForm.form.name
    }
    commonAction({
      url: '/server-work/action/serviceGroup/list',
      method: 'post',
      data: sendData
    }).then(res => {
      if (res.success) {
        res.data.list.forEach(item => {
          item.directorPer = this.getName(item.director)
          item.updateUser = this.getName(item.updateUser)
        })
        this.tableData = res.data.list
        this.tablePages.total = res.data.count
      }
    })
  }

  private createSuc () {
    this.getTableList()
    this.showPage = false
  }

  private addBtnFun () {
    this.showPage = true
    this.titleArr = ['服务组配置', '添加服务组']
    this.$nextTick(() => {
      this.serviceGroupList.baseInfoFrom = {
        name: '',
        director: '',
        description: '',
        members: []
      }
    })
  }

  private editFun (row: any) {
    this.showPage = true
    this.titleArr = ['服务组配置', '编辑服务组']
    this.$nextTick(() => {
      this.serviceGroupList.baseInfoFrom = deepClone(row)
    })
  }

  private handleDel (row: any) { // 删除
    this.$confirm(`确定要删除${row.name}吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      commonAction({
        url: '/server-work/action/serviceGroup/delete',
        method: 'post',
        data: { id: row.id }
      }).then(res => {
        if (res.success) {
          this.$message.success('删除成功')
          this.getTableList()
        }
      })
    })
  }

  private returnPage () { // 新增返回列表
    this.showPage = false
  }

  private beforeMount () {
    this.getTableList()
    let handlers: any[] = []
    if (checkPermission(null, { value: ['post_sale_service_group_edit'] })) {
      handlers.push({ name: '编辑', handleFn: (scope: any) => this.editFun(scope.row) })
    }
    if (checkPermission(null, { value: ['post_sale_service_group_delete'] })) {
      handlers = [...handlers,
        ...[{ className: 'danger', name: '删除', handleFn: (scope: any) => this.handleDel(scope.row) }]
      ]
    }
    this.tableHeader.push({ label: '操作', width: 100, handlers })
  }
}
</script>
